<template>
    <div class="status">
        <template v-if="goods.isWillDelist == 1">
            <el-tag type="danger" v-if="goods.delistType == 2" size="small">停产</el-tag>
            <el-tag type="warning" v-else-if="goods.delistType == 1">暂时下架</el-tag>
        </template>
        <el-tag type="primary" size="small" v-else-if="goods.productStatus == 3">上架</el-tag>
        <el-tag type="primary" size="small" v-else-if="goods.productStatus == 1">预发布</el-tag>
        <el-tag type="info" effect="dark" size="small" v-else-if="goods.productStatus == 5">下架</el-tag>
        <el-tag type="info" effect="dark" size="small" v-else-if="goods.productStatus == 7">即将删除</el-tag>
        <el-tag type="danger" size="small" v-else-if="goods.productStatus == 6">已驳回</el-tag>
        <el-tag type="danger" size="small"
            v-else-if="goods.productStatus == 2 && goods.auditingState == 1">首次审核</el-tag>
        <el-tag type="danger" size="small"
            v-else-if="goods.productStatus == 2 && goods.auditingState == 2">驳回再申请</el-tag>
        <el-tag type="danger" size="small"
            v-else-if="goods.productStatus == 2 && goods.auditingState == 3">二次审核</el-tag>
        <el-tag type="danger" size="small"
            v-else-if="goods.productStatus == 2 && goods.auditingState == 4">价格变更</el-tag>
        <div class="detail" v-if="goods.productStatus == 4 || goods.isWillDelist == 1">
            <el-tag type="primary" effect="dark" size="small" v-if="goods.auditingState == 4">变更明细</el-tag>
            <div>
                <div class="day">{{ getTime(goods.delistTime).day }}天</div>
                <el-countdown :value="getTime(goods.delistTime).timestamp" :value-style="countDownStyle"
                    format=" HH : mm : ss " />
            </div>
        </div>
    </div>
</template>

<script setup>
import { countDownStyle } from "../config";
defineProps(['goods']);

/**
 * 根据时间返回时间戳和天数
 */
const getTime = (time) => {
    const now = new Date();
    const futureDate = new Date(time).getTime();
    const diff = futureDate - now;
    const day = Math.floor(diff / 1000 / 60 / 60 / 24);
    const integer = day * 24 * 60 * 60 * 1000;
    const timestamp = new Date(futureDate > integer ? futureDate - integer : futureDate).getTime();
    return {
        day,
        timestamp
    };
}
</script>

<style lang="scss" scoped>
.status {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;

    .el-tag {
        justify-self: center;
    }

    .detail {
        display: flex;
        justify-content: center;
        width: 100%;

        .day {
            width: 100%;
            background: #F6F8FA;
            text-align: center;
            margin: 0 auto;
            border-radius: 4px;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
        }
    }
}
</style>